<template>
	<el-dialog :title="ruleForm.id!=='0'?'修改角色':'创建角色'" v-model="isShowDialog" width="450px"
		:close-on-click-modal="false" :close-on-press-escape="false">
		<el-form :model="ruleForm" size="default" label-width="100px" ref="userForm">
			<el-row :gutter="35">

				<el-col :xs="24" :sm="22" :md="22" :lg="22" :xl="22" class="mb20">
					<el-form-item label="角色名称" required :rules="[{ required: true, message: '请输入名称'} ]" prop="Name">
						<el-input v-model="ruleForm.Name" placeholder="请输入名称" clearable
							v-on:keyup.enter="onSubmit(userForm)"></el-input>
					</el-form-item>
				</el-col>

				<el-col :xs="24" :sm="22" :md="22" :lg="22" :xl="22" class="mb20">
					<el-form-item label="说明">
						<el-input v-model="ruleForm.Description" placeholder="请输入说明" type="textarea"
							v-on:keyup.enter="onSubmit(userForm)"></el-input>
					</el-form-item>
				</el-col>
				<el-col :xs="24" :sm="22" :md="22" :lg="22" :xl="22" class="mb20">
					<el-form-item label="允许设置成员">
						<el-switch v-model="ruleForm.AllowAppendMembers" active-text="是" inactive-text="否"
							:active-value="1" />
					</el-form-item>
				</el-col>
			</el-row>
		</el-form>
		<template #footer>
			<span class="dialog-footer">
				<el-button @click="onCancel" size="default">取 消</el-button>
				<el-button type="primary" @click="onSubmit(userForm)" size="default"> 提交 </el-button>
			</span>
		</template>
	</el-dialog>
</template>

<script lang="ts">
	import {
		reactive,
		toRefs,
		onMounted,
		ref,
	} from 'vue';
	import {
		createAPI,
		setInfoAPI,
	} from '/@/api/usersroles/index';
	import {
		ElForm,
		ElMessage
	} from 'element-plus';
	export default {
		name: 'UserForm',
		setup() {
			type FormInstance = InstanceType < typeof ElForm > ;
			const userForm = ref < FormInstance > ();
			const state = reactive({
				isShowDialog: false,
				ruleForm: {
					ID: '0',
					Name: '',
					Description: '',
					AllowAppendMembers: true,
				},

			});
			// 打开弹窗
			const openDialog = (model: Object, callback: Function) => {
				state.ruleForm = model;
				state.isShowDialog = true;
				state.callback = callback;
			};
			// 关闭弹窗
			const closeDialog = () => {
				state.ruleForm = {
					ID: '0',
					Name: '',
					Description: '',
					AllowAppendMembers: true,
				}
				userForm.value.resetFields();
				state.isShowDialog = false;
			};
			// 取消
			const onCancel = () => {
				closeDialog();
			};
			// 保存
			const onSubmit = (formEl: FormInstance | undefined) => {
				//console.log('submit!')
				if (!formEl) return
				formEl.validate((valid) => {
					if (valid) {
						//	console.log('submit!')

						let api = state.ruleForm.ID !== '0' ? setInfoAPI : createAPI;
						api(state.ruleForm).then(async (response) => {
							//console.log(response);
							if (response['code'] === 0) {
								if (state.callback) {
									state.callback();
								}
								ElMessage.success(`${response.message}`);
								closeDialog();
							}


						});
					} else {

						return false
					}
				})
			};

			// 页面加载时
			onMounted(() => {

			});

			return {
				userForm,
				openDialog,
				closeDialog,
				onCancel,
				onSubmit,
				...toRefs(state),
			};
		},
	};
</script>
